<template>
  <div class="designer-wrap">
    <div
      class="designer-content-box"
      :style="{ height: readable.value ? '100vh' : 'calc(100vh - 50px)' }"
    >
      <div class="flow-design-wrap">
        <div id="flow-design" class="flow-design-container" :style="zoomStyle">
          <div id="flow-design-content" class="flow-design-content">
            <!-- <FlowStartNode :node="nodeData" /> -->
            <FlowNode :node="nodeData" :readable="readable.value" />
            <FlowEndNode :node="nodeData" :readable="readable.value" />
          </div>
        </div>
               <!-- <FlowHelper v-if="!readable" /> -->
        <FlowTips v-if="readable.value" />
        <FlowZoom v-model="zoomValue.value" />
        <!-- <FlowMap v-if="!isMobile" /> -->
      </div>
    </div>
  </div>
</template>
<script setup name="">
import FlowZoom from "../../common/FlowZoom.vue";
import FlowTips from "../../common/FlowTips.vue";
import FlowNode from "./node/FlowNode.vue";
import FlowEndNode from "./node/FlowEndNode.vue";
import {
  reactive,
  ref,
  createApp,
  
  
  computed,
  onMounted,
  toRefs,
} from "vue";
import { useStore } from "vuex";
/* 组件局部注册 */
const app = createApp({});
const store = useStore();
//接收父组件传过来的值

const props = defineProps({
  // node: {
  //   type: Object,
  //   default: function () {
  //     return getStartNode();
  //   },
  // },
  node: {
    type: Object,
    default: () => {},
  },
  navable: {
    type: Boolean,
    default: true,
  },
  readable: {
    type: Boolean,
    default: false,
  },
});
const isMobile = ref(false);
const { node, navable, readable } = toRefs(props);
const emit = defineEmits(["publish"]);
//定义一个数据
const zoomValue = ref(100);
//reactive 主要是用来处理复杂的数据类型，比如对象和数组。
//所以当你传递的是非对象时，页面不会发生响应
//错误示范
// let error = reactive(err)
//正确示范
// let right = reactive({
// 	name:"张三"
// })
// //修改值得时候
// right.name = "李四"

//  vue2 => computed
const zoomStyle = computed(() => {
  console.log("------------------", zoomValue.value);
  return {
    zoom: zoomValue.value / 100,
  };
  // return zoomValue.value / 100;
});

// const nodeData = computed(() => {
//   return store.state.process.node;
// })

const nodeData = computed(() => {
  // console.log("form---为啥获取不到-->", store.state.process.design.formData);
  return store.state.process.node;
});

//mounted => onMounted
// onMounted(() => {
//    console.log("这个啥时候调用啊a,我咋不知道呢")
//    store.dispatch('process/setNode', node.value);
// })
const getData = () => {
  return nodeData.value;
};

const toReturn = () => {};

const publish = () => {
  emit("publish", nodeData.value);
};
</script>